{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>学生信息管理系统</title>
    <!-- 引入外部的样式文件 -->
    <link rel="stylesheet" href="{% static 'css/index.css' %}"/>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <!-- 使用CDN引入Vue模块-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <!-- 引入Element组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入Axios组件库 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>
    <div id="app">
        <el-container>
            <el-header style="height: 80px;">学生信息管理系统</el-header>
            <el-container>
                <!-- 侧边栏 -->
                <el-aside width="200px">
                    <el-menu default-active="2" class="el-menu-vertical-demo">
                        <el-menu-item index="1">
                            <i class="el-icon-menu"></i>
                            <span slot="title">班级管理</span>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <i class="el-icon-user"></i>
                            <span slot="title">学生信息</span>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <i class="el-icon-s-custom"></i>
                            <span slot="title">讲师信息</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <i class="el-icon-document"></i>
                            <span slot="title">课程管理</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-container>
                    <!-- 主窗体 -->
                    <el-main>
                        <!-- 面包屑导航 -->
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item>首页</el-breadcrumb-item>
                            <el-breadcrumb-item>学生管理</el-breadcrumb-item>
                        </el-breadcrumb>
                        <!-- 表单 -->
                        <el-form :inline="true" style="margin-top:30px;">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="请输入查询条件：">
                                        <el-input v-model="inputStr" placeholder="输入查询条件" style="width: 420px;">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" style="text-align: right;padding-right:10px;">
                                    <el-button-group>
                                        <el-button type="primary" icon="el-icon-search" @click="queryStudents()">查询
                                        </el-button>
                                        <el-button type="primary" icon="el-icon-tickets" @click="getAllStudents()">全部
                                        </el-button>
                                        <el-button type="primary" icon="el-icon-circle-plus-outline"
                                            @click="addStudent()">添加</el-button>
                                    </el-button-group>
                                </el-col>
                                <el-col :span="2">
                                    <el-upload :show-file-list="false" :http-request="uploadExcelPost">
                                        <el-button type="primary">导入Excel</el-button>
                                    </el-upload>
                                </el-col>
                                <el-col :span="2">
                                    <el-button type="primary" @click="exportToExcel()">导出Excel</el-button>
                                </el-col>
                            </el-row>
                        </el-form>
                        <!-- 表格 -->
                        <el-table :data="pageStudents" border style="width: 100%" size="mini"
                            @selection-change="handleSelectionChange">
                            <el-table-column type="selection">
                            </el-table-column>
                            <el-table-column type="index" label="序号" align="center" width="60">
                            </el-table-column>
                            <el-table-column prop="sno" label="学号" width="80">
                            </el-table-column>
                            <el-table-column prop="name" label="姓名" width="80">
                            </el-table-column>
                            <el-table-column prop="gender" label="性别" width="60">
                            </el-table-column>
                            <el-table-column prop="birthday" label="出生日期" align="center" width="100">
                            </el-table-column>
                            <el-table-column prop="mobile" label="电话" align="center" width="120">
                            </el-table-column>
                            <el-table-column prop="email" label="邮箱" align="center" width="220">
                            </el-table-column>
                            <el-table-column prop="address" label="地址" align="center">
                            </el-table-column>
                            <el-table-column label="操作" width="180" align="center">
                                <template slot-scope="scope">
                                    <el-button type="success" icon="el-icon-more" size="mini" circle
                                        @click="viewStudent(scope.row)"></el-button>
                                    <el-button type="primary" icon="el-icon-edit" size="mini" circle
                                        @click="updateStudent(scope.row)"></el-button>
                                    <el-button type="danger" icon="el-icon-delete" size="mini" circle
                                        @click="deleteStudent(scope.row)"></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- 分页 -->
                        <el-row style="margin-top: 20px;">
                            <el-col :span="8" style="text-align: left">
                                <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteStudents()">
                                    批量删除</el-button>
                            </el-col>
                            <el-col :span="16" style="text-align: right">
                                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                    :current-page="currentpage" :page-sizes="[5, 10, 50, 100]" :page-size="pagesize"
                                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                                </el-pagination>
                            </el-col>
                        </el-row>
                        <!-- 弹出框的学生明细表单 -->
                        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%"
                            @close="closeDialogForm('studentForm')">
                            <el-form :model="studentForm" :rules="rules" ref="studentForm" :inline="true"
                                style="margin-left: 20px;" label-width="110px" label-position="right" size="mini">
                                <el-upload class="avatar-uploader" 
                                    :show-file-list="false" :http-request="uploadPicturePost" :disabled="isView"  style="text-align: center;margin:20px;" >
                                    <img v-if="studentForm.image" :src="studentForm.imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                                <el-form-item label="学号：" prop="sno">
                                    <el-input v-model="studentForm.sno" :disabled="isEdit||isView"
                                        suffix-icon="el-icon-edit"></el-input>
                                </el-form-item>
                                <el-form-item label="姓名：" prop="name">
                                    <el-input v-model="studentForm.name" :disabled="isView" suffix-icon="el-icon-edit">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="性别：" prop="gender">
                                    <el-select v-model="studentForm.gender" :disabled="isView" placeholder="请选择性别">
                                        <el-option value="男"></el-option>
                                        <el-option value="女"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="出生日期：" prop="birthday">
                                    <el-date-picker v-model="studentForm.birthday" value-format="yyyy-MM-dd"
                                        :disabled="isView" type="date" placeholder="选择日期" style="width:93% ">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="手机号码：" prop="mobile">
                                    <el-input v-model="studentForm.mobile" :disabled="isView"
                                        suffix-icon="el-icon-edit"></el-input>
                                </el-form-item>
                                <el-form-item label="邮箱地址：" prop="email">
                                    <el-input v-model="studentForm.email" :disabled="isView" suffix-icon="el-icon-edit">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="家庭住址：" prop="address">
                                    <el-input v-model="studentForm.address" :disabled="isView"
                                        suffix-icon="el-icon-edit" style="width:262%"></el-input>
                                </el-form-item>
                            </el-form>
                            <span slot="footer" class="dialog-footer">
                                <el-button type="primary" size="mini" v-show="!isView"
                                    @click="submitStudentForm('studentForm')">确 定</el-button>

                                <el-button type="info" size="mini" @click="closeDialogForm('studentForm')">取 消
                                </el-button>
                            </span>
                        </el-dialog>
                    </el-main>
                    <el-footer style="height: 30px;">学生信息管理系统 版权所有：Steven Wang | 2020-10-10</el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</body>

</html>
<!-- 引入Vue代码 -->
<script src="{% static 'js/index.js' %}"></script>